// vant 导航栏
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title, .van-nav-bar__text, .van-icon {
    color: #fff;
  }
}

#app{
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
// .container是Layout.vue组件的根元素的类名
.container{
  width: 100%;
  height: 100%;
  // logo
  .logo {
    background: url("../assets/logo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
  }
}

// .index 是home/index.vue组件的根元素的类名
.index {
  height: 100%;
  // 让出顶部导航条的距离
  padding-top:46px;

  .van-tabs__wrap {
    position:fixed;
    top:46px;
    left:0px;
    right:30px; 
  }
  // 让出van-tabs的高度
  .van-tabs--line{
    padding-top:50px; 
  }
  
  .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    .van-tabs__content {
      flex:1;
      overflow: hidden;
      // 能看到文章列表中的loading效果
      .van-tabs__content { padding-bottom: 50px; } 
    }
    .van-tabs__line {
      width: 30px !important;
      background-color: #3296fa;
      bottom: 20px;
    }
  }
  .van-tab__pane{
      height: 100%;
  }
  // .scroll-wrapper是home/ArticleList.vue组件的根元素的类名
  .scroll-wrapper{
    overflow:auto;
    height: 100%;
  }

  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
}
